<template>
	<view>
		 <view class="shop">
			<view class="goodsList" v-if="goodsList.length > 0">
				<view class="item flex justify-start align-center" v-for="(item,index) in goodsList" :key="item.id" @tap="$wanlshop.to(`/pages/medicalcare/accompany/product?id=${item.id}&shop_id=${shop_id}`)">
					<image :src="$wanlshop.oss(item.image)" mode="aspectFill"></image>
					<view class="info flex-sub">
						<view class="title text-cut-2">{{item.title}}</view>
						<view class="tag" v-if="item.tags">
							<text v-if="i < 2" v-for="(m,i) in item.tags.split(',')">{{m}}</text>
						</view>
						<view class="bottom">
							<text class="text-price">{{item.price}}</text>
							<text>立即预约</text>
						</view>
					</view>
				</view>
			</view>
		 </view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				goodsList:[],
				shop:null,
				state:0,
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				},
				countList:[],
				shop_id:''
			}
		},
		computed: {
			...mapState(['common'])
		},
		onLoad(option) {
			this.shop_id = option.id;
			this.loadData(option.id)
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		methods: {
			async loadData(id) {
				await uni.request({
					url: '/addons/accompany/api.Product/lists',
					method: 'post',
					data: {
						shop_id: id || this.shop_id,
						page: this.current_page
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.goodsList = this.reload ? res.data.data : this.goodsList.concat(res.data.data); //数据 追加
						this.total = res.data.total; //数据量
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? 'noMore' : 'more';
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	
.shop {
	background-color: #fff;
	.goodsList {
		background-color: #f7f7f7;
		padding: 20rpx 0;
		.item {
			background-color: #fff;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #f7f7f7;
			&:nth-child(1) {
				border-radius: 20rpx 20rpx 0 0;
			}
			&:last-child {
				border-radius: 0 0 20rpx 20rpx;
				border:none;
			}
			> image {
				width: 164rpx;
				height: 164rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				// height: 164rpx;
				.title {
					color: #333;
					font-size: 28rpx;
				}
				
				.tag {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 10rpx;
					text {
						color: #999;
						font-size: 20rpx;
						margin-right: 10rpx;
						border: 1px solid #ededed;
						border-radius: 6rpx;
						padding: 2rpx 10rpx;
					}
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.text-price {
						color: #FD5502;
						font-size: 36rpx;
					}
					text {
						&:last-child {
							width: 180rpx;
							height: 72rpx;
							background: #57B966;
							border-radius: 20rpx;
							line-height: 72rpx;
							text-align: center;
							font-size: 30rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
}
</style>
